<#if hasPermission>
<#assign dialogId = id + "menu"/>
<script>
    function updateMenuImage${dialogId} (iframe) {
        contentId${dialogId} = $(iframe).contents().find("span").html();
        if (contentId${dialogId}) {
            $("#menu-image-preview-${dialogId}").attr("src", "<@ofbizUrl>ViewSimpleContent</@ofbizUrl>?contentId=" + contentId${dialogId});
            document.editMenu${dialogId}.contentId.value = contentId${dialogId};
        }
    }
</script>

<div class="edit-menu">
<a id="edit-menu-button-${dialogId}" class="edit-button" href="javascript: void(0);"></a>
<a class="delete-button" href="javascript: ajaxDeleteButton('${dialogId}', '<@ofbizUrl>deleteMenu</@ofbizUrl>', 'menuId=${menu.menuId?if_exists}','${uiLabelMap.RestaurantAreYouSure}');"></a>
</div>
<#-- Edit Menu Start-->

<div id="${dialogId}" title="${uiLabelMap.RestaurantEditMenu}">
  <p class="error-message" id="errorMessage${dialogId}"></p>
  <form name="editMenu${dialogId}" action="<@ofbizUrl>updateMenu</@ofbizUrl>" method="post">
    <input name="menuId" type="hidden" value="${menu.menuId?if_exists}"/>
    <input name="productCategoryId" type="hidden" value="${parameters.productCategoryId?if_exists}"/>
    <input name="contentId" type="hidden" value="${menu.contentId?if_exists}"/>
    <table class="basic-table" cellspacing="0">
          <tbody>
          <tr>
            <td colspan="2" class="add-menu-image-box">
                <img src="<@ofbizUrl>ViewSimpleContent?contentId=${menu.contentId?if_exists}</@ofbizUrl>" id="menu-image-preview-${dialogId}"/>
                <br/>
                <a href="javascript: void(0);" id="upload-menu-image-${dialogId}">
                    <i class="fa fa-camera"></i>
                </a>
            </td>
          </tr>
          <tr>
            <td class="label">${uiLabelMap.RestaurantMenuName}</td>
            <td><input type="text" name="menuName" id="name" value="${menu.name?if_exists}" class="text ui-widget-content ui-corner-all"></td>
          </tr>
          <tr>
            <td class="label">${uiLabelMap.RestaurantPrice}</td>
            <td><input type="text" name="price" id="price" value="${menu.price?if_exists}" class="text ui-widget-content ui-corner-all" size="4"><#-- TODO: put currency--></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" tabindex="-1" style="position:absolute; top:-1000px"></td>
          </tr>
        </tbody>
    </table>
  </form>
</div>
<div style="display: none">
    <form name="uploadMenuImage${dialogId}" action="<@ofbizUrl>uploadMenuImage</@ofbizUrl>" method="post" target="edit-menu-iframe-${dialogId}" enctype="multipart/form-data">
        <input type="file" name="uploadedFile" id="uploadMenuImage-${dialogId}" value="" class=""/>
    </form>
    <iframe name="edit-menu-iframe-${dialogId}" id="edit-menu-iframe-${dialogId}" onLoad="updateMenuImage${dialogId}(this)"></iframe>
</div>
<script type="text/javascript">
    function editMenu${dialogId} () {
        submitDialogForm("${dialogId}", document.editMenu${dialogId});
        return false;
    }
    dialog${dialogId} = $( "#${dialogId}" ).dialog({
      autoOpen: false,
      height: 500,
      width: 500,
      modal: true,
      buttons: {
        "${StringUtil.wrapString(uiLabelMap.RestaurantSave)}": editMenu${dialogId},
        "${StringUtil.wrapString(uiLabelMap.RestaurantCancel)}": function() {
          dialog${dialogId}.dialog( "close" );
        }
      },
      close: function() {
        document.editMenu${dialogId}.reset();
        $("#errorMessage${dialogId}").html("");
      }
    });
    
    $("#edit-menu-button-${dialogId}").button().on( "click", function() {
        dialog${dialogId}.dialog( "open" );
    });
    $("#upload-menu-image-${dialogId}").click(function () {
        $("#uploadMenuImage-${dialogId}").trigger("click");
    });
    $("#uploadMenuImage-${dialogId}").change(function () {
        document.uploadMenuImage${dialogId}.submit();
    });
</script>
<#-- Edit Menu End-->
</#if>
<div class="menu-img">
    <img alt="" src="<@ofbizUrl>ViewSimpleContent?contentId=${menu.contentId?if_exists}</@ofbizUrl>">
    <br/>
    ${menu.name?if_exists} - <@ofbizCurrency isoCode=menu.currencyUsed amount=menu.price/>
    <br/><br/>
    <#assign menuForm = "menu" + menu.menuId/>
    <form name="${menuForm}" action="<@ofbizUrl>orderMenu</@ofbizUrl>" method="post">
        <input name="tableId" type="hidden" value="${currentTableId?if_exists}"/>
        <input name="productCategoryId" type="hidden" value="${parameters.productCategoryId?if_exists}"/>
        <input name="menuId" type="hidden" value="${menu.menuId}"/>
        <input name="webSiteId" type="hidden" value="${webSiteId}"/>
        <a href="javascript: editQuantity(document.${menuForm}, -1);"><i class="fa fa-minus-circle"></i></a><input name="quantity" value="1" size="2"/><a href="javascript: editQuantity(document.${menuForm}, 1);"><i class="fa fa-plus-circle"></i></a><button type="submit">${uiLabelMap.RestaurantOrder}</button>
    </form>
</div>
